<template>
  <view class="similar-section">
    <view class="section-header">
      <view class="section-title">
        <text class="title-text">  推荐</text>
      </view>
      <view class="view-all" @tap="handleViewAll">查看全部 ></view>
    </view>
    <view class="similar-list">
      <view class="similar-item" v-for="(item, index) in roomList" :key="index" @tap="handleRoomClick(item)">
        <view class="image-container">
          <image :src="item.mainImages[0] || '/static/images/empty-house.png'" mode="aspectFill" class="similar-img"></image>
          <view class="similar-tag">{{item.tag}}</view>
          <view class="like-icon">
            <text class="iconfont icon-xingxing"></text>
          </view>
        </view>
        
        <!-- 店铺信息 -->
        <view class="store-info">
          <image :src="item.storeAvatar || '/static/images/default-avatar.png'" class="store-avatar" mode="aspectFill"></image>
          <text class="store-name">{{ item.storeName || item.store_name || '民宿' }}</text>
        </view>
        
        <view class="room-info">
          <view class="distance"><text class="iconfont icon-dingwei"></text> 距该房源{{item.distance}}米</view>
          <view class="similar-title">{{item.title}}</view>
          <view class="score-container">
            <text class="score-label" :class="{'score-excellent': parseFloat(item.score) >= 4.8}">超棒</text>
            <text class="score">{{item.score || '5.0'}}分</text>
            <text class="review-count">{{item.reviewCount || '50'}}条评价</text>
          </view>
          <view class="tag-container">
            <view class="tag-item" v-for="(tag, tIndex) in item.tags" :key="tIndex">{{tag}}</view>
          </view>
          <view class="similar-price">
            <text class="price">¥{{item.price}}</text>
            <text class="original-price">¥{{item.originalPrice}}</text>
            <view class="discount-tag">已减¥{{item.discount}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<!-- // +----------------------------------------------------------------------
// | panweidongAI编程开发者  
// +----------------------------------------------------------------------
// | 联系379247101@qq.com   公司：AI技术部
// +----------------------------------------------------------------------
// | Author: panweidong <379247101@qq.com>
// +---------------------------------------------------------------------- -->

<script>
import { create } from '../../api/store';


export default {
  name: 'houseOtherRooms',
  props: {
    roomList: {
      type: Array,
      default: () => []
    }
  },
  created() {
    console.log(this.roomList)
  },
  methods: {
    handleRoomClick(room) {
      this.$emit('room-click', room);
    },
    handleViewAll() {
      this.$emit('view-all');
    },
    getRandomTags() {
      const allTags = ['超赞房东', '有投影', '有麻将机', '免费停车'];
      // 随机返回1-2个标签
      const count = Math.floor(Math.random() * 2) + 1;
      const shuffled = [...allTags].sort(() => 0.5 - Math.random());
      return shuffled.slice(0, count);
    }
  }
}
</script>

<style lang="scss" scoped>
.similar-section {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  position: relative;
  padding-left: 20rpx;
  
  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 32rpx;
    background: linear-gradient(to bottom, #ff6b6b, #ff8e8e);
    border-radius: 4rpx;
  }
}

.view-all {
  font-size: 24rpx;
  color: #999;
  padding: 6rpx 12rpx;
  border-radius: 30rpx;
  background-color: #f5f5f5;
  
  &:active {
    background-color: #eee;
  }
}

.similar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20rpx;
}

.similar-item {
  width: 48%;
  margin-bottom: 20rpx;
  position: relative;
  transition: transform 0.3s ease;
  border-radius: 15rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  
  &:active {
    transform: scale(0.98);
  }
}

.image-container {
  position: relative;
  width: 100%;
  height: 180rpx;
  border-radius: 15rpx 15rpx 0 0;
  overflow: hidden;
}

.similar-img {
  width: 100%;
  height: 100%;
}

.similar-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
}

.like-icon {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.like-icon .iconfont {
  color: #fff;
  font-size: 30rpx;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* 店铺信息样式 */
.store-info {
  display: flex;
  align-items: center;
  padding: 12rpx 15rpx;
  background-color: #f8f9fa;
  border-bottom: 1rpx solid #f0f0f0;
}

.store-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  background-color: #e0e0e0;
}

.store-name {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-info {
  padding: 15rpx;
  display: flex;
  flex-direction: column;
}

.distance {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
}

.distance .iconfont {
  margin-right: 4rpx;
  font-size: 22rpx;
  color: #666;
}

.similar-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

.score-container {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.score-label {
  font-size: 20rpx;
  background-color: #eef9ff;
  color: #28abf1;
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
  margin-right: 6rpx;
}

.score-excellent {
  background-color: #f1f8e9;
  color: #7cb342;
}

.score {
  font-size: 20rpx;
  color: #ff6b35;
  font-weight: bold;
  margin-right: 6rpx;
}

.review-count {
  font-size: 20rpx;
  color: #999;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8rpx;
}

.tag-item {
  font-size: 20rpx;
  color: #28abf1;
  background-color: #f5f5f5;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
  margin-bottom: 6rpx;
}

.similar-price {
  display: flex;
  align-items: center;
}

.price {
  font-size: 28rpx;
  color: #ff6b35;
  font-weight: bold;
  margin-right: 10rpx;
}

.original-price {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
  margin-right: 10rpx;
}

.discount-tag {
  font-size: 20rpx;
  color: #fff;
  background-color: #ff6b35;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
}
</style> 